<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>萌宠找货购物单</title>
    <link rel="stylesheet" href="/css/shop.css">
</head>
<body>
    <header></header>
    <main>
        <div class="cart-container">
            <div class="cart-header">
                <div class="submit">
                    <h1>萌宠找货购物单</h1>
                    <div class="right">
                        <span class="delivery-cost">
                            总金额 (已包含运费金额￥<span id="top-total1">00.00</span>)
                        </span>
                        <strong class="total-price">￥<span id="top-total2">00.00</span></strong>
                        <button class="submit-btn">下单结算</button>
                    </div>
                </div>
                <div class="titles">
                    <ol class="row thead">
                        <li class="col-checkbox">
                            <input type="checkbox" class="checkall" />
                            <label for="">全选</label>
                        </li>
                        <li class="col-product-img"></li>
                        <li class="col-product-name">商品信息</li>
                        <li class="col-product-price">单价</li>
                        <li class="col-product-num">数量</li>
                        <li class="col-product-total">合计</li>
                        <li class="col-operate">操作</li>
                    </ol>
                </div>
            </div>


            <div class="cart-empty">
                <img src="/img/null.png" alt="">
                <span class="text">您的购物车还是空的，赶紧行动吧！</span>
                <a href="/index.html">返回首页</a>
                <a href="/web/list.html">选择商品</a>
            </div>


            <div class="cart-products">
                <div class="cake-list cake" id="shopping-Car"></div>
                <script type="text/html" id="shoppingCar">
                    {{each cart list}}
                        <ol class="row" data-id="{{list.id}}">
                            <li class="col-checkbox">
                                <input type="checkbox" class="check" {{ list.check ? 'checked' : '' }}>
                            </li>
                            <li class="col-product-img">
                                {{if list.src}}
                                    <a href=""><img src="{{list.src}}" alt=""></a>
                                {{/if}}
                                {{if list.image}}
                                    <a href=""><img src="{{list.image}}" alt=""></a>
                                {{/if}}
                            </li>
                            <li class="col-product-name">
                                <div class="name"><a>{{list.title}}</a></div>
                                <div class="size">规格：1</div>
                            </li>
                            <li class="col-product-price">￥{{list.price}}</li>
                            <li class="col-product-num">
                                <div class="product-num-input">
                                    <span class="sub-btn">-</span>
                                    <input type="input" id="btn-input" value="{{list.count}}">
                                    <span class="add-btn">+</span>
                                </div>
                            </li>
                            <li class="col-product-total">￥{{ (list.price * list.count).toFixed(2) }}</li>
                            <li class="col-operate">
                                <div class="del-btn">X</div>
                            </li>
                        </ol>
                    {{/each}}
                </script>
            </div>
            



            <div class="cart-footer">
                <input type="checkbox" class="checkall">
                <label for="">全选</label>
                <button class="submit-order-btn">下单结算</button>
                <span class="cart-total">
                    合计<span class="total">￥<span id="bottom-total">00.00</span></span>
                </span>
            </div>
        </div>


        <div class="main-like content">
            <div class="like-title">猜你喜欢</div>
            <ul class="like-ul" id="like-ul"></ul>
            <script type="text/html" id="rap2-list">
                {{each list like}}
                    <li data-likeId="{{like.id}}">
                        <div class="likeList-img">
                            <img src="{{like.src}}" alt=""/>
                        </div>
                        <div class="likeList-text">{{like.title}}</div>
                        <span class="likeList-price">￥{{like.price}}</span>
                    </li>
                {{/each}}
            </script>
        </div>

    </main>

    <footer>

    </footer>

    <script src="/libs/require/require.min.js" data-main="/js/shop"></script>
</body>
</html>